import { listSimpleRoles } from "@/api/system/role";
import { BasicForm, useForm } from "@/components/Form";
import { BasicModal, useModalInner } from "@/components/Modal";
import { useTranslation } from "react-i18next";

const UserRoleModal = (props: { register: Fn }) => {
	const { t } = useTranslation();
	const userRoleFormSchema = [
		{
			label: t("system.user.id"),
			field: "id",
			show: false,
			component: "Input"
		},
		{
			label: t("system.user.username"),
			field: "username",
			component: "Input",
			dynamicDisabled: () => true
		},
		{
			label: t("system.user.nickname"),
			field: "nickname",
			component: "Input",
			dynamicDisabled: () => true
		},
		{
			label: t("system.user.role"),
			field: "roleIds",
			component: "ApiSelect",
			componentProps: {
				api: () => listSimpleRoles(),
				labelField: "name",
				valueField: "id"
				// mode: "tags"
			}
		}
	];
	const [registerForm, { validateFields, resetFields, setFieldsValue }] = useForm({
		labelWidth: 120,
		schemas: userRoleFormSchema,
		showActionButtonGroup: false,
		baseColProps: { span: 24 },
		actionColOptions: { span: 23 }
	});

	const getTitle = t("system.user.userPermissions");
	const [registerModal, { setModalProps, closeModal }] = useModalInner(props.register, data => {
		resetFields();
		setModalProps({ confirmLoading: true });
		setFieldsValue({
			...data.record
		});
		setModalProps({ confirmLoading: false });
	});

	async function handleSubmit() {
		try {
			const values = await validateFields();
			console.log("提交", values);
			setModalProps({ confirmLoading: true });
			closeModal();
		} finally {
			setModalProps({ confirmLoading: false });
		}
	}

	return (
		<BasicModal {...props} title={getTitle} register={registerModal} ok={handleSubmit}>
			<BasicForm register={registerForm} />
		</BasicModal>
	);
};

export default UserRoleModal;
